<template>
	<view class="jx_list">
		<view v-for="article in props.articleList" :key="article.id" class="article-item"
			@click="skipDetail(article.id,article.title)" v-if="props.articleList.length">
			<image class="article-image" :src="article.image" mode="aspectFill" />
			<view class="article-content">
				<text class="article-title">{{ article.title }}</text>
				<text class="article-desc">{{ article.description }}</text>
				<view class="article-meta">
					<text class="meta-item">{{ formatDate(article.createdAt) }}</text>
					<view class="meta-right">
						<view class="meta-icon">
							<uni-icons type="hand-up" size="14" color="#666"></uni-icons>
							<text>{{ article.likesCount }}</text>
						</view>
						<view class="meta-icon">
							<uni-icons type="eye" size="14" color="#666"></uni-icons>
							<text>{{ article.SeesCount }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		defineProps
	} from 'vue'
	const props = defineProps({
		articleList: {
			type: Array,
			default: []
		}
	})
	const data = reactive({
		empty: false,

	})
	const formatDate = (dateStr) => {
		// 实现日期格式化逻辑
		return dateStr.split('日')[0].replace('年', '-').replace('月', '-');
	}
	// 跳转详情页
	const skipDetail = (id, title) => {
		uni.navigateTo({
			url: `/pages/detail/detail?id=${id}&title=${title}`
		})
	}
</script>

<style lang="scss" scoped>
	.jx_list {

		.article-item {
			background: #fff;
			border-radius: 16rpx;
			margin-bottom: 30rpx;
			padding: 30rpx;
			display: flex;
			transition: all 0.3s ease;
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.06);

			&:active {
				transform: scale(0.98);
				box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
			}

			.article-image {
				width: 200rpx;
				height: 200rpx;
				border-radius: 12rpx;
				margin-right: 30rpx;
				flex-shrink: 0;
			}

			.article-content {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.article-title {
					font-size: 32rpx;
					font-weight: 500;
					color: #333;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
				}

				.article-desc {
					font-size: 26rpx;
					color: #999;
					margin: 15rpx 0;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
				}

				.article-meta {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.meta-item {
						font-size: 24rpx;
						color: #999;
					}

					.meta-right {
						display: flex;
						align-items: center;

						.meta-icon {
							display: flex;
							align-items: center;
							margin-left: 30rpx;

							text {
								font-size: 24rpx;
								color: #666;
								margin-left: 8rpx;
							}
						}
					}
				}
			}
		}
	}
</style>